<!--
	课程管理下的--批量导入课程
-->
<template>
<!-- 外面的容器 start -->
<div class="import-box">
	<!-- 头部栏 start -->
	<div class="top-box">
		<el-upload
			class="upload-demo"
			drag
			multiple
			:before-upload="beforeFile"
			:accept="['.xls','.xlsx']"
			action="//jsonplaceholder.typicode.com/posts/"
		>
			<el-icon class="el-icon--upload"><upload-filled /></el-icon>
			<div class="el-upload__text">
				拖拽文件或者 <em>点击上传</em>
			</div>
			<template #tip>
				<div class="el-upload__tip">
					仅excel文件，大小小于5M
				</div>
			</template>
		</el-upload>
	</div>
	<!-- 头部栏 end -->
	<!-- 内容区域 显示解析出来的数据 start -->
	<div class="table-data">
		<el-table
			ref="multipleTableRef"
			:data="importData"
			style="width: 100%"
			@selection-change="handleSelectionChange"
		>
			<el-table-column type="selection" width="55" />
			<el-table-column label="课程名称">
				<template #default="scope">{{ scope.row[0] }}</template>
			</el-table-column>
			<el-table-column label="课程介绍">
				<template #default="scope">{{ scope.row[1] }}</template>
			</el-table-column>
			<el-table-column label="课程大纲">
				<template #default="scope">{{ scope.row[2] }}</template>
			</el-table-column>
			<el-table-column label="授课教师">
				<template #default="scope">{{ scope.row[3] }}</template>
			</el-table-column>
			<el-table-column label="参与班级">
				<template #default="scope">{{ scope.row[4] }}</template>
			</el-table-column>
		</el-table>
		<div style="margin-top: 20px">
			<el-button type="primary" @click="importBeSure()">导入</el-button>
			<el-button type="danger" @click="deleteSelect()">删除</el-button>

		</div>
	</div>
	<!-- 内容区域 end -->
</div>
<!-- 外面的容器 end -->
</template>

<script>
import axios from "@/plugins/axios";
import ipconfig from "@/utils/ipconfig";
import excel from "@/utils/excel";
import {ElMessage} from "element-plus";

export default {
	name: "ImportCourse",
	data(){
		return {
			/**
			 * 解析出来的数据，这个是带第一行标题的
			 */
			tableData:[],
			/**
			 * 用于展示的数据，这个就是解析出来的数据去掉第一行标题的数据
			 */
			importData:[],
			/*
			* 选中的数据
			* */
			selectData:[],
		}
	},
	methods:{
		beforeFile(file){
			const fileExt = file.name.split('.').pop().toLocaleLowerCase()
			this.uploadFile = file;
			if (fileExt === 'xlsx' || fileExt === 'xls') {
				this.readFile(file)
				this.file = file
				// excel.export_array_to_excel(this.file)
			} else {

			}
			return false;
		},
		// 读取文件
		readFile(file) {
			const reader = new FileReader()
			reader.readAsArrayBuffer(file)
			// 读取中
			reader.onprogress = e => {
				this.progressPercent = Math.round(e.loaded / e.total * 100);
				console.log(this.progressPercent);
			}
			// 出错时触发
			reader.onerror = e => {
				console.error('文件读取出错');
			}
			// 文件读取成功完成时触发
			reader.onload = e => {
				const data = e.target.result;
				const results = excel.readExcel(data, 'array');
				this.tableData = results;  //这里的tableData就是拿到的excel表格中的数据
				// 去掉标题（第一行）的数据，展示
				this.importData = results.splice(1);
				console.log(this.tableData);
			}
		},
		/**
		 * 确定导入
		 */
		importBeSure(){
			// 没有数据先提示
			if(this.selectData.length<1){
				ElMessage.error("您没有选中数据！");
				return;
			}
			// 发送请求
			axios.post(ipconfig.address+"/course/importCourse",
				this.selectData
			).then((response)=>{
				if(response.data.code==200){
					ElMessage.success(response.data.message);
				}else{
				    ElMessage.warning(response.data.message);
				}
			}).catch((error)=>{
			    console.log(error);
			});

		},
		/**
		 * 多选选中事件
		 * @param selection
		 */
		handleSelectionChange(selection){
			// 将选中的用一个变量保存，确定的时候直接请求选中的数据
			this.selectData=selection;
		},
		/**
		 * 删除已经选中的数据
		 */
		deleteSelect() {
			this.importData = this.importData.filter((item)=>{
				let selectData = this.selectData;
				for(let i = 0; i<selectData.length; i++){
					if(item==selectData[i]){
						return false;
					}
				}
				return true;
			});
			ElMessage.success("成功删除"+this.selectData.length+"条数据");
		},

	},
	created(){

	},
}
</script>

<style lang="scss" scoped>
.import-box{
	width: 100%;
	height: 100%;

	.top-box{
		width: 100%;
	}

	.table-data{
		width: 100%;
	}
}
</style>